<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>排程编辑</title>
  <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
  <link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
  <link rel=stylesheet href=../src/css/graph.editor.css>
</head>
<body class="layout">

<!--这是编辑页面-->
<div id="editor" data-options="region:'center'"></div>
<!--jQ-->
<!--<script src="./static/plugins/qunee/libs/jquery.js"></script>-->
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.js"></script>
<script src="libs/qunee-min.js"></script>
<!-- build:js libs/js.js -->
<!--<script src="libs/jquery.min.js"></script>-->
<script src="libs/qunee-module.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>

<script src="libs/layout.border.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- endbuild -->
<!-- build:js libs/graph.editor.js -->
<script src="src/common/CopyPaste.js"></script>
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/common/Image-background.js"></script>
<script src="src/common/GridBackground.js"></script>
<script src="src/graph.editor.js"></script>

<!-- endbuild -->
<script>


  Q.name=""
  Q.Graph.scaleStep=0.1;
  let aps=null;
  function getQunee(Aps){
    aps=Aps
  }
  Q.registerImage('lamp', Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -8, -8, 16, 16));
  var imgs = [] ;
  let taskName = null;
  function getTaskName(name){
    taskName = name;
  }
  //需要图片路径，图片名，模型ID
  function initToolbox (data) {
    // getQunee()
    // alert("页面渲染中.......")
    //   console.log('第一条记录的模型名字：' + data[0].cname);
    //   console.log('数组的大小为：' + data.length);
    for (var i = 0; i < data.length; i++) {
      var name = data[i].cname;
      var url = data[i].curl;
      imgs.push({label: name,
        //image: '../../img/' + url});
        image: '../../img/modelImages/' + url});
    }
    console.log(imgs);
    $('#editor').graphEditor({
        saveService: 'save',
        //回调函数
        callback: function (editor) {
          editor.toolbox.hideDefaultGroups();
          var graph = editor.graph;
          editor._id=taskName;
          graph.onclick = function(){
            if(graph.popupmenu){
              graph.popupmenuOld = graph.popupmenu;
              // graph.popupmenu = null
            }else{
              graph.popupmenu = graph.popupmenuOld;
            }
          }
          graph.originAtCenter = false;
          var background = new ImageBackground(graph, {
            onload: function () {
              // loadDatas();
              // graph.moveToCenter();
              graph.parseJSON(aps)

              graph.moveToCenter()
              // graph.limitedBounds = background.bounds;
              graph.zoomToOverview();
            }
          });

          //背景图片设置项
          background.image = '../../img/modelImages/WorkSpace.PNG';
          background=new GridBackground(graph)
          // graph.styles = {
          //   //'shadow.color': '#555',
          //   //'shadow.blur': 2,
          //   'arrow.to': false,
          //   'shape.fill.gradient': new Q.Gradient(Q.Consts.GRADIENT_TYPE_RADIAL, [Q.toColor(0x55DDDDDD), Q.toColor(0x55777777), Q.toColor(0x55C0C0C0), Q.toColor(0x55555555)], [0, 0.6, 0.8, 1]),
          //   'shape.stroke': 0.5,
          //   'shape.stroke.style': '#000'
          // }
          var t=JSON.parse(graph.exportJSON(true));
          // console.log(graph.exportJSON(true));


        },
        images:
          {
            prefix: 'Q-',
            //name: 'basic.nodes',
            displayName: "设备模型",
            images: imgs
          }




      }
    );


  }


  function restore() {
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/restore', true);
    xhr.onload = function () {
      alert('restore database');
    };
    xhr.onerror = function (e) {
      showInfo('restore error');
    };
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send();
  }

  window.parent['deliverAps']();
  window.parent['deliverTaskName']();
  alert("处理数据中")
  setTimeout(
    ()=>{
      window.parent['getInitData']();
    },
    500
  )

</script>

</body>
</html>
